
<div class="ad_title_ctn">
    <h2>Quốc gia</h2>
</div>

<div class="ad_content_ctn">
    <div class="country_critetia_ctn">

        <div class="left">
            <span>Tên quốc gia: </span>
            <input class="k-textbox" style="width: 300px" id="txtName" >
        </div>
        <div class="clear"></div>

    </div>
    <div class="country_search_ctr">
        <a id="btnSearch"  class="k-button k-button-icontext">Tìm kiếm</a>
    </div>
    <div id="country_grid"></div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $(".country_critetia_ctn").keyup( function(event) {
            if ( event.which == 13 ) {
                event.preventDefault();
                doSearch();
            }
        });

        dataSource = new kendo.data.DataSource({
            type: "jsonp",
            transport: {

                read: function(options) {
                    options.data.name=$('#txtName').val();

                    $.ajax( {
                        url: "<?php echo '/admin/catalog/country-list'  ?>",
                        data: options.data,
                        success: function(result) {

                            options.success(result);
                        },
                        dataType: "json",
                        type: "POST"

                    });
                },

                create:function(options) {
                    $.ajax( {
                        url: "/admin/catalog/country-add",
                        data: options.data,
                        success: function(result) {
                            if(result.success){
                                grid = $("#country_grid").data("kendoGrid");
                                data = grid.dataItem("tr:eq(0)");
                                data.id = result.id;
                                options.success(options.data.models);
                                $('#error_ctn').addClass('blue_text').html('Thêm thành công.');
                            }else{
                                $('#error_ctn').removeClass('blue_text').html(result.msg);
                                grid = $("#country_grid").data("kendoGrid");
                                // cancel changes
                                grid.cancelChanges();
                            }
                        },
                        dataType: "json",
                        type: "POST"

                    });
                },
                update:function(options) {
                    $.ajax( {
                        url: "/admin/catalog/country-update",
                        data: options.data,
                        success: function(result) {
                            if(result.success){
                                options.success(options.data.models);
                                $('#error_ctn').addClass('blue_text').html('Sửa thành công.');
                            }else{
                                $('#error_ctn').removeClass('blue_text').html(result.msg);
                                grid = $("#country_grid").data("kendoGrid");
                                // cancel changes
                                grid.cancelChanges();
                            }
                        },
                        dataType: "json",
                        type: "POST"

                    });
                },

                destroy: function(options) {
                    $.ajax( {
                        url: "/admin/catalog/country-remove",
                        data: options.data,
                        success: function(result) {
                            if(result.success){
                                options.success(options.data.models);
                                $('#error_ctn').addClass('blue_text').html('Xóa thành công.');
                            }else{
                                $('#error_ctn').removeClass('blue_text').html(result.msg);
                                grid = $("#country_grid").data("kendoGrid");
                                // cancel changes
                                grid.cancelChanges();
                            }


                        },
                        dataType: "json",
                        type: "POST"

                    });
                }
            },
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: {editable: false,  type: "number" },
                        name: { type: "string", validation: { required: true} },
                        code: { type: "string",validation: { required: true} },
                        created_by: { type: "string" },
                        created_date: {editable: false, type: "date" }
                    }
                },
                data: "rows",
                total: "total"
            },
            //                    batch: true,
            pageSize: 2,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        });

        $("#country_grid").kendoGrid({
            dataSource: dataSource,
            navigatable: true,
            pageable: true,
            selectable: "row",
            columnMenu: true,
            sortable: true,
            resizable:true,
            toolbar:[{ name: "create", text: "Thêm mới" }],

            columns: [
                { field: "name", title: "Tên", width: 100},
                { field: "code", title: "Mã", width: 50 },

                { field: "created_date", title: "Ngày tạo", width: 80,
                    template: '# if(created_date != null){#' +
                        '#= kendo.toString(created_date,"dd/MM/yyyy") #' +
                        '#}#'},
                { command:  [{name: "destroy", text: ""},{name: "edit", text: ""}],  title: "&nbsp;", width: 40 }

            ],
            editable: "popup",
            edit:function(e){
                e.container.data('kendoWindow').bind('activate',function(ex){
                    nameInput = e.container.find('input[name="name"]');
                    nameInput.select();
                    nameInput.focus();
                    e.container.keypress(function(event){
                        //if the key press is ESC
                        if (event.keyCode === 27) {
                            //close the KendoUI window
                            e.container.data("kendoWindow").close();
                        }
                    });
                    if(e.model.isNew())
                        e.container.data('kendoWindow').title('Thêm mới');
                    else
                        e.container.data('kendoWindow').title('Sửa');
                })

            }
        });

        function doSearch(){
            grid = $("#country_grid").data("kendoGrid");
            grid.dataSource.page(1);
            grid.dataSource.read();
        }

        $('#btnSearch').click(function(){
            doSearch();
        })
    });

</script>
<style type="text/css">
    .country_search_ctr{
        margin: 5px;
        padding: 10px 0px;
        border-top: 1px dotted #ccc;
    }
</style>